<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>
        blogs
    </title>
    
<link rel="stylesheet" href="/libs/highlight/styles/monokai-sublime.css">

    
<link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">

    
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 4.2.0"></head>

<body id="bodyx">
    <div class="hd posts">
    <a href="/index.html"><i class="fa fa-reply replay-btn" aria-hidden="true"></i></a>
    <div class="post-title">
        <p>
            学习ES6语法(6)
        </p>
        <hr>
    </div>
    <div class="post-content">
        <h1 id="十五、Proxy-增强"><a href="#十五、Proxy-增强" class="headerlink" title="十五、Proxy(增强)"></a>十五、Proxy(增强)</h1><ul>
<li><p>Proxy的存在就可以让我们给函数加上这样的钩子函数，你也可以理解为在执行方法前预处理一些代码。你可以简单的理解为他是函数或者对象的生命周期。</p>
</li>
<li><p>定义对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    add: <span class="function"><span class="params">val</span> =&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> val+<span class="number">10</span></span><br><span class="line">    &#125;,</span><br><span class="line">    </span><br><span class="line">    name:<span class="string">'I am Js'</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj.add(<span class="number">10</span>))  <span class="comment">// 20</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.name) <span class="comment">// I am Js</span></span><br><span class="line"></span><br><span class="line">声明了一个obj对象，增加了一个对象方法add和一个对象属性name</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>声明Proxy</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">需要注意的是这里是两个花括号，第一个花括号就相当于我们方法的主体，后边的花括号就是<span class="built_in">Proxy</span>代理处理区域，相当于我们写钩子函数的地方</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> pro = <span class="keyword">new</span> <span class="built_in">Proxy</span>(&#123;</span><br><span class="line">    add: <span class="function"><span class="params">val</span> =&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> val+<span class="number">10</span></span><br><span class="line">    &#125;,</span><br><span class="line">    </span><br><span class="line">    name:<span class="string">'I am Js'</span></span><br><span class="line">&#125;,&#123;</span><br><span class="line">    <span class="keyword">get</span>:(target,key,property) =&gt;&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">"i am get"</span>)</span><br><span class="line">        <span class="keyword">return</span> target[key];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">在方法执行前执行<span class="keyword">get</span>函数并打印i am <span class="keyword">get</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>get属性</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">get</span>属性是在你得到某对象属性值时预处理的方法，他接受三个参数</span><br><span class="line"></span><br><span class="line">target：得到的目标值</span><br><span class="line">key：目标的key值，相当于对象的属性</span><br><span class="line">property：这个不太常用，用法还在研究中，还请大神指教</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>set属性</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">set</span>属性是值你要改变Proxy属性值时，进行的预先处理。它接收四个参数</span><br><span class="line"></span><br><span class="line">target:目标值。</span><br><span class="line">key：目标的Key值。</span><br><span class="line">value：要改变的值。</span><br><span class="line">receiver：改变前的原始值。</span><br><span class="line"></span><br><span class="line">var pro = new Proxy(&#123;</span><br><span class="line">    add: <span class="function"><span class="keyword">function</span> (<span class="params">val</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> val + <span class="number">10</span>;</span><br><span class="line">    &#125;,</span><br><span class="line">    name: <span class="string">'I am Jspang'</span></span><br><span class="line">&#125;, &#123;</span><br><span class="line">        <span class="keyword">get</span>:function(target,key)&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'come in Get'</span>);</span><br><span class="line">            <span class="keyword">return</span> target[key];</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="keyword">set</span>:function(target,key,value,receiver)&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">`    setting <span class="subst">$&#123;key&#125;</span> = <span class="subst">$&#123;value&#125;</span>`</span>);</span><br><span class="line">            <span class="keyword">return</span> target[key] = value;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(pro.name);</span><br><span class="line">pro.name=<span class="string">'技术胖'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(pro.name);</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>apply的使用</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时</span><br><span class="line"></span><br><span class="line"><span class="keyword">get</span> = function () &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'I am JSPang'</span>;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> handler = &#123;</span><br><span class="line">    apply(target, ctx, args) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'do apply'</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">Reflect</span>.apply(...arguments);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> pro = <span class="keyword">new</span> <span class="built_in">Proxy</span>(target, handler);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(pro());</span><br><span class="line"></span><br><span class="line">apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时</span><br></pre></td></tr></table></figure>

<ul>
<li>建议看阮一峰大神的《ES6》,这个只是简单入门</li>
</ul>
</li>
</ul>
<h1 id="十六、promise对象的使用"><a href="#十六、promise对象的使用" class="headerlink" title="十六、promise对象的使用"></a>十六、<strong>promise对象的使用</strong></h1><ul>
<li><p>promise的出现很好的解决掉回调地狱的问题，ES5中代码多层嵌套，代码层次过多</p>
</li>
<li><p>举个栗子</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line">promise的执行是存在一定的顺序的，必须是上一步执行结束，才能继续执行</span><br><span class="line"><span class="keyword">let</span> state=<span class="number">1</span>; <span class="comment">//定义一个状态</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">step1</span>(<span class="params">resolve,reject</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'1.开始-洗菜做饭'</span>);</span><br><span class="line">    <span class="keyword">if</span>(state==<span class="number">1</span>)&#123;</span><br><span class="line">        resolve(<span class="string">'洗菜做饭--完成'</span>);</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        reject(<span class="string">'洗菜做饭--出错'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">step2</span>(<span class="params">resolve,reject</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'2.开始-坐下来吃饭'</span>);</span><br><span class="line">    <span class="keyword">if</span>(state==<span class="number">1</span>)&#123;</span><br><span class="line">        resolve(<span class="string">'坐下来吃饭--完成'</span>);</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        reject(<span class="string">'坐下来吃饭--出错'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">step3</span>(<span class="params">resolve,reject</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'3.开始-收拾桌子洗完'</span>);</span><br><span class="line">     <span class="keyword">if</span>(state==<span class="number">1</span>)&#123;</span><br><span class="line">        resolve(<span class="string">'收拾桌子洗完--完成'</span>);</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        reject(<span class="string">'收拾桌子洗完--出错'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(step1).then(<span class="function"><span class="keyword">function</span>(<span class="params">val</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(val);</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(step2);</span><br><span class="line"></span><br><span class="line">&#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params">val</span>)</span>&#123;</span><br><span class="line">     <span class="built_in">console</span>.log(val);</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(step3);</span><br><span class="line">&#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params">val</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(val);</span><br><span class="line">    <span class="keyword">return</span> val;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">实际开发中常用</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h1 id="十七、class类的使用"><a href="#十七、class类的使用" class="headerlink" title="十七、class类的使用"></a>十七、class类的使用</h1><ul>
<li><p><strong>类的声明</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">coder</span></span>&#123;</span><br><span class="line">    name(val)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(val)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>类的使用</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Coder</span></span>&#123;</span><br><span class="line">    name(val)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(val);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> jspang= <span class="keyword">new</span> Coder; <span class="comment">//类的实例化，调用类中的方法</span></span><br><span class="line">jspang.name(<span class="string">'jspang'</span>);</span><br><span class="line"></span><br><span class="line">类的多方法声明</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Coder</span></span>&#123;</span><br><span class="line">    name(val)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(val);</span><br><span class="line">        <span class="keyword">return</span> val;</span><br><span class="line">    &#125;</span><br><span class="line">    skill(val)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name(<span class="string">'jspang'</span>)+<span class="string">':'</span>+<span class="string">'Skill:'</span>+val);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> jspang= <span class="keyword">new</span> Coder;</span><br><span class="line">jspang.name(<span class="string">'jspang'</span>);</span><br><span class="line">jspang.skill(<span class="string">'web'</span>);</span><br><span class="line"></span><br><span class="line">两个方法中间不要写逗号了，还有这里的<span class="keyword">this</span>指类本身，还有要注意<span class="keyword">return</span> 的用法</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>类的传参</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">coder</span></span>&#123;</span><br><span class="line">    name(val)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(val);</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//构造方法</span></span><br><span class="line">    <span class="keyword">constructor</span>(a,b)&#123;</span><br><span class="line">        <span class="keyword">this</span>.a = a;</span><br><span class="line">        <span class="keyword">this</span>.b = b;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//方法/函数</span></span><br><span class="line">    add()&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.a+<span class="keyword">this</span>.b;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>class的继承</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">coder</span></span>&#123;</span><br><span class="line">    name(val)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(val);</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//构造方法</span></span><br><span class="line">    <span class="keyword">constructor</span>(a,b)&#123;</span><br><span class="line">        <span class="keyword">this</span>.a = a;</span><br><span class="line">        <span class="keyword">this</span>.b = b;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//方法/函数</span></span><br><span class="line">    add()&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.a+<span class="keyword">this</span>.b;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 继承coder类，被继承的方法都可以被调用</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Demo</span> <span class="keyword">extends</span> <span class="title">coder</span></span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> demo = <span class="keyword">new</span> Demo(<span class="number">1</span>,<span class="number">5</span>);</span><br><span class="line">demo.name(<span class="string">"技术🐟"</span>)</span><br><span class="line"><span class="built_in">console</span>.log(demo.add());</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">如果有学习Java语言也知道继承是一大特性</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h1 id="十八、模块化操作"><a href="#十八、模块化操作" class="headerlink" title="十八、模块化操作"></a>十八、模块化操作</h1><ul>
<li><p>export :负责进行模块化，也是模块的输出</p>
</li>
<li><p>import:负责模块化的导入，</p>
</li>
<li><p><strong>export的用法：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> name = <span class="string">"js"</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123;a&#125; <span class="keyword">from</span> <span class="string">'./temp.js'</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(a);</span><br><span class="line"></span><br><span class="line">最简单的模块的输出和引入</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>多变量的输出</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a =<span class="string">'jspang'</span>;</span><br><span class="line"><span class="keyword">var</span> b =<span class="string">'技术胖'</span>;</span><br><span class="line"><span class="keyword">var</span> c = <span class="string">'web'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123;a,b,c&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">as</span>的用法 有些时候我们并不想暴露模块里边的变量名称，而给模块起一个更语义话的名称</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a =<span class="string">'jspang'</span>;</span><br><span class="line"><span class="keyword">var</span> b =<span class="string">'技术胖'</span>;</span><br><span class="line"><span class="keyword">var</span> c = <span class="string">'web'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123;</span><br><span class="line">    x <span class="keyword">as</span> a,</span><br><span class="line">    y <span class="keyword">as</span> b,</span><br><span class="line">    z <span class="keyword">as</span> c</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p>export default的使用 加上default相当是一个默认的入口。在一个文件里export default只能有一个。我们来对比一下export和export default的区别</p>
<ul>
<li><p>export</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> a =<span class="string">'jspang'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">导入方式</span><br><span class="line"><span class="keyword">import</span> &#123;a,add&#125; form <span class="string">'./temp'</span>;<span class="comment">//也可以分开写</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
</li>
</ul>
<ul>
<li><p>export defalut</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">var</span> a=<span class="string">'jspang'</span>;</span><br><span class="line"></span><br><span class="line">对应的引入方式</span><br></pre></td></tr></table></figure>

<ul>
<li>可能不是太好，但是也努力了 </li>
</ul>
</li>
</ul>

    </div>
    
        <hr class="fhr">
        <div id="vcomments"></div>
    
</div>
    <div class="footer" id="footer">
    <p>Copyright © 2020 <a class="flink" href="https://hexo.io" target="_blank" rel="noopener">Hexo</a>-<a class="flink" href="https://github.com/sanjinhub/hexo-theme-geek" target="_blank" rel="noopener">Geek</a>.
        <label class="el-switch el-switch-green el-switch-sm" style="vertical-align: sub;">
            <input type="checkbox" name="switch" id="update_style">
            <span class="el-switch-style"></span>
        </label>
<!--         <script type="text/javascript">
        var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");
        document.write(unescape("%3Cspan id='cnzz_stat_icon_1278548644'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/stat.php%3Fid%3D1278548644%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
        </script> -->
    </p>
</div>
<input type="hidden" id="web_style" value="black">
<input type="hidden" id="valine_appid" value="oU6aM6U9xOv4LHEQLo3LLROT-gzGzoHsz">
<input type="hidden" id="valine_appKey" value="TbfimrkuMCSYC9BPMRdOqKga">

<script src="/libs/jquery.min.js"></script>


<script src="/libs/highlight/highlight.pack.js"></script>

<script src='//cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>

<script src="/js/js.js"></script>

<style type="text/css">
.v * {
    color: #698fca;
}

.v .vlist .vcard .vhead .vsys {
    color: #3a3e4a;
}

.v .vlist .vcard .vh .vmeta .vat {
    color: #638fd5;
}

.v .vlist .vcard .vhead .vnick {
    color: #6ba1ff;
}

.v a {
    color: #8696b1;
}

.v .vlist .vcard .vhead .vnick:hover {
    color: #669bfc;
}
</style>
</body>

</html>